<template>
  <div>
    <el-row class="dh">
      <el-col :span="6" class="dhLeft">
        <el-col class="dhList">
          <div
            v-for="(item, index) in gldhList"
            :key="index"
            class="dhItem"
            @mouseover="dhAtion(index)"
            @mouseout="noAction"
          >
            <span class="title"
              >{{ item.dh_title
              }}<i class="el-icon-arrow-right el-icon--right"></i
            ></span>
            <zt-tj
              v-if="item.dh_title == '主题推荐'"
              :itemList="item.dh_item_list"
              class="clNav"
              :class="{ isAction: index == currentIndex }"
            ></zt-tj>
            <gldh
              v-else
              :itemList="item.dh_item_list"
              class="clNav"
              :class="{ isAction: index == currentIndex }"
            ></gldh>
          </div>
        </el-col>
        <el-col class="dhInput">
          <el-input placeholder="请输入想去的地方，如:香港" v-model="inputText">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-col>
        <el-col class="appDown">
          <div class="downUrl">
            <img :src="appDownUrl" alt="" />
          </div>
          <div class="downText" @mouseover="dBlock" @mouseout="dNone">
            <p>马蜂窝自由行APP下载</p>
            <p>
              <a href="#">iPhone版</a>
              <a href="#">Android版</a>
              <a href="#">iPad版</a>
            </p>
            <div class="downImg" :class="{ isAction: downNone }">
              <img :src="appDownUrl1" alt="" />
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="17" :push="1" class="swiper">
        <el-carousel trigger="click" :height="imgHeight">
          <el-carousel-item
            v-for="(item1, index1) in glSliderList"
            :key="index1"
          >
            <img :src="item1" alt="" class="img" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>

    <el-row class="con">
      <el-col class="conLeft" :span="4">
        <el-col class="clTitle"><p>旅游攻略导航</p></el-col>
        <el-col class="clMap">
          <div
            v-for="(item2, index2) in lyglmapList"
            :key="index2"
            class="mapItem"
          >
            <div
              class="mapTitle"
              @click="mapAction(index2)"
              :class="{ actionStyle: currentMapIndex == index2 }"
            >
              {{ item2.type
              }}<i class="el-icon-caret-bottom el-icon--right"></i>
            </div>
            <gl-map
              class="glMap"
              :class="{ isAction: currentMapIndex == index2 }"
              :mapList="item2.mapList"
            ></gl-map>
          </div>
        </el-col>
        <el-col>
          <gl-rank :rankList="rankList"></gl-rank>
        </el-col>
      </el-col>
      <el-col class="conRight" :span="19" :push="1">
        <el-col class="crTitle"><p>推荐攻略</p></el-col>
        <el-col>
          <gl-tjgl :glList="tjGlList"></gl-tjgl>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from "@/api/lygl";

import Gldh from "components/gonglve/gl_gldh.vue";
import ZtTj from "components/gonglve/gl_zttj.vue";
import GlMap from "components/gonglve/gl_glmap.vue";
import GlRank from "components/gonglve/gl_rank.vue";
import GlTjgl from "components/gonglve/gl_tjgl.vue";

export default {
  name: "gl_index",
  data() {
    return {
      gldhList: [], //导航
      glSliderList: [], //轮播图
      lyglmapList: [], //旅游攻略导航
      rankList: [], //排行
      tjGlList: [], //推荐攻略
      appDownUrl:
        "	https://images.mafengwo.net/images/app/m/logo_gonglve_v6.png?v=20150825",
      appDownUrl1:
        "https://p3-q.mafengwo.net/s12/M00/17/80/wKgED1vb_fqAeZq0AAAxwHmnAuc675.png",
      downNone: false,
      currentIndex: -1,
      currentMapIndex: -1,
      inputText: "",
    };
  },
  computed: {
    imgHeight() {
      if (document.querySelector(".img") != null) {
        return document.querySelector(".img").height + "px";
      } else {
        return "340px";
      }
    },
  },
  components: {
    Gldh,
    ZtTj,
    GlMap,
    GlRank,
    GlTjgl,
  },
  methods: {
    dhAtion(index) {
      this.currentIndex = index;
    },
    noAction() {
      this.currentIndex = -1;
    },
    dBlock() {
      this.downNone = true;
    },
    dNone() {
      this.downNone = false;
    },
    mapAction(index) {
      if (this.currentMapIndex == index) {
        this.currentMapIndex = -1;
      } else {
        this.currentMapIndex = index;
      }
    },
  },
  created() {
    api.getGldhInfo().then((res) => {
      this.gldhList = res.gldhList;
    });
    api.getGlSliderInfo().then((res) => {
      this.glSliderList = res.glSliderList;
    });
    api.getLyglmapInfo().then((res) => {
      this.lyglmapList = res.lyglmapList;
    });
    api.getRankInfo().then((res) => {
      this.rankList = res.rankList;
    });
    api.getTjglInfo({ page: 1, limit: 79 }).then((res) => {
      this.tjGlList = res.tjglListMock;
    });
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.el-row {
  max-width: 1000px;
  margin: 0 auto;
}
.dh {
  padding: 15px 0;
  .dhLeft {
    .dhList {
      border: 1px solid #eee;
      box-sizing: border-box;
      .dhItem {
        position: relative;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        &:last-child {
          border: 0;
        }
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          cursor: default;
          padding: 0 15px;
          min-height: 40px;
          line-height: 40px;
          color: #666;
          &:hover {
            color: #ff9d00;
          }
          i {
            font-weight: bold;
          }
        }
        .clNav {
          position: absolute;
          left: calc(100% + 1px);
          top: -1px;
          z-index: 999;
        }
      }
    }
    .dhInput {
      padding: 15px 0;
      /deep/ .el-input__inner {
        font-size: 12px;
        border: 2px solid #ff9d00;
      }
      i {
        font-size: 18px;
        font-weight: bold;
        color: #ff9d00;
      }
    }
    .appDown {
      display: flex;
      align-items: center;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
      .downUrl {
        display: flex;
        align-items: center;
        img {
          width: 50px;
        }
      }
      .downText {
        flex-grow: 1;
        cursor: pointer;
        position: relative;
        &:hover {
          p {
            &:first-child {
              color: #ff9d00;
              text-decoration: underline;
            }
          }
        }
        p {
          margin: 0 auto;
          text-align: center;
          font-size: 16px;
          display: block;
          &:nth-of-type(2) {
            display: flex;
            justify-content: space-between;
            padding-top: 4px;
          }
          a {
            flex-grow: 1;
            font-size: 12px;
            text-align: center;
            color: #666;
            border-right: 1px solid #666;
            &:last-child {
              border: 0;
            }
          }
        }
        .downImg {
          display: none;
          position: absolute;
          z-index: 999;
          left: 50%;
          top: 25px;
          transform: translateX(-50%);
        }
      }
    }
  }
  .swiper {
    max-width: 700px;
    /deep/ .el-carousel__indicators--horizontal {
      left: auto;
      right: 30px;
      bottom: 10px;
      transform: translate(0);
    }
    /deep/ .el-carousel__indicator--horizontal {
      padding: 4px;
      border-radius: 50%;
      margin: 5px 3px;
    }
    /deep/ .el-carousel__indicator--horizontal.is-active {
      border: 2px solid #ff9d00;
    }
    /deep/ .el-carousel__button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      opacity: 1;
    }
    /deep/ .el-carousel__indicator.is-active button {
      background-color: #ff9d00;
    }
  }
}
.con {
  padding-top: 20px;
  .conLeft {
    max-width: 160px;
    .clTitle {
      p {
        font-size: 16px;
        padding-bottom: 15px;
      }
    }
    .clMap {
      position: relative;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      .mapItem {
        .mapTitle {
          display: flex;
          align-items: center;
          margin: 8px 0;
          font-size: 14px;
          color: #333;
          border-right: 1px solid #eee;
          cursor: pointer;
        }
        &:last-child {
          .mapTitle {
            border: 0;
          }
        }
        .glMap {
          position: absolute;
          left: 0;
          z-index: 999;
        }
      }
    }
  }
  .conRight {
    .crTitle {
      color: #333;
      font-size: 20px;
      padding-bottom: 12px;
    }
  }
}
/deep/ .el-backtop {
  color: #ff9d00;
}
/deep/ .el-backtop:hover {
  background-color: #fff9ef;
}
.actionStyle {
  color: #ff9d00 !important;
}
.isAction {
  display: block !important;
}
</style>